//封装选择器
$ = (x) => document.querySelectorAll(x)

var content = $('.content')[0] //获取列表
const checkYear = $('#checkYear')[0] //获取年份切换下拉框
const checkMonth = $('#checkMonth')[0] //获取月份切换下拉框
const showYear = $(".showYear")[0] //获取年份模式按钮
const showMonth = $(".showMonth")[0] //获取月份模式按钮

D= new Date() //初始化时间戳
var year = D.getFullYear() //获取年份
var date = D.getDate()  //获取当月第几天
var day = D.getDay()  //获取星期
var month = D.getMonth()+1  //获取月份

show()//初始化列表

/**
 * 
 * @param {当前被鼠标选中的日子,非必须} checkedDay 
 * @returns 当前渲染内容的模板字符串
 */
//创建月份模式下的节点
function show(checkedDay){
    D.setDate(1)
    D.setFullYear(year)
    D.setMonth(month-1)
    let days = getDays(month) //获取当月天数
    let firstDay = D.getDay() || 7 //本月第一天星期几
    let lastDay = firstDay+days%7-1 //最后一天星期几
    let preDays = getDays(month-1) //上月多少天
    let show = ``
    if(isThisDay()){
        var today =isThisDay()
    }
    //列表第一部分(上月内容)
    for(let i=firstDay-1;i>0;i--){
        show = show + `<div class='preMonth'>${preDays-i+1}</div>`
    }
    //列表第二部分(本月内容)
    checkedDay=parseInt(checkedDay)
    for(let i=1;i<=days;i++){
        if(today&&i==today&&!checkedDay)show = show + `<div class='thisMonth' style='border-top:2px solid #1890ff;background:rgb(230, 247, 255);'>${i<10?'0'+i:i}</div>`
        else if(checkedDay&&i==today&&today)show = show + `<div class='thisMonth' style='border-top:2px solid #1890ff;'>${i<10?'0'+i:i}</div>`
        else if(checkedDay&&i==checkedDay)show = show + `<div class='thisMonth' style='background:rgb(230, 247, 255);'>${i<10?'0'+i:i}</div>`
        else show = show + `<div class='thisMonth'>${i<10?'0'+i:i}</div>`
    }
    //列表第三部分(下月内容)
    for(let i=1;i<=(7-lastDay)+7;i++){
        show = show + `<div class='nextMonth'>${i<10?'0'+i:i}</div>`
    }
    content.innerHTML=show
    checkYear.value = year //同步下拉框中年份
    checkMonth.value = month //同步下拉框中月份
    return show
}

/**
 * 
 * @returns 当前渲染内容的模板字符串
 */
//创建年份模式下的节点
function show2(){
    let show = ``
    let now =new Date()
    for(let i=1;i<=12;i++){
        if(i==now.getMonth()+1&&year==now.getFullYear())show = show + `<div class='month' style='border-top:2px solid #1890ff;background:rgb(230, 247, 255);'>${i+'月'}</div>`
        else show = show + `<div class='month'>${i+'月'}</div>`
    }
    content.innerHTML=show
    checkYear.value = year //同步下拉框中年份
    checkMonth.value = month //同步下拉框中月份
    return show
}

/**
 * 
 * @param {需要获取天数的月份} month 
 * @returns 当月天数
 */
//获取当月天数
function getDays(month){
    if(month==1||month==3||month==5||month==7||month==8||month==10||month==12||month==0)return 31
    else if(month==2)return 28
    else return 30
}
/**
 * 
 * @returns 如果显示的是当前月份，则返回当前为几号
 */
//检验是否在当前月份
function isThisDay(){
    let now =new Date()
    if(month==now.getMonth()+1&&year==now.getFullYear()) return now.getDate()
}

//监听列表点击事件
content.addEventListener('click',function(event){
    event = event || window.event
    if(event.target.className=='preMonth'){
        if(month==1){
            year--
            month=12
        }
        else month--
        let checkedDay = event.target.innerHTML
        show(checkedDay)
    }
    else if(event.target.className=='thisMonth'){
        const list = $('.content div')
        for(let i=0;i<list.length;i++){
            list[i].style.background = 'none'
        }
        event.target.style.background = 'rgb(230, 247, 255)'
    }
    else if(event.target.className=='nextMonth'){
        if(month==12){
            year++
            month=1
        }
        else month++
        let checkedDay = event.target.innerHTML
        show(checkedDay)
    }
    else if(event.target.className=='month'){
        const list = $('.content div')
        for(let i=0;i<list.length;i++){
            list[i].style.background = 'none'
        }
        event.target.style.background = 'rgb(230, 247, 255)'
    }
},true)

//监听鼠标移入及移出
content.addEventListener('mouseenter',function(event){
    event = event || window.event
    if(event.target.className != 'content'&&event.target.style.background != 'rgb(230, 247, 255)')
    event.target.style.background = '#f2f2f2'
},true)
content.addEventListener('mouseout',function(event){
    event = event || window.event
    if(event.target.className != 'content'&&event.target.style.background != 'rgb(230, 247, 255)')
    event.target.style.background = 'none'
},true)

//监听模式切换按钮
showMonth.onclick = () => {
    $('#checkMonth')[0].style.display = 'inline-block'
    $('.header')[0].style.display = 'block'
    show()
    showYear.style.border = '1px solid #ccc'
    showYear.style.boxShadow = 'none'
    
    showMonth.style.border = '1px solid #1890ff'
    showMonth.style.boxShadow = '0px 0px 2px 2px #a8dff8'
}
showYear.onclick = () => {
    $('#checkMonth')[0].style.display = 'none'
    $('.header')[0].style.display = 'none'
    show2()
    showYear.style.border = '1px solid #1890ff'
    showYear.style.boxShadow = '0px 0px 2px 2px #a8dff8'

    showMonth.style.border = '1px solid #ccc'
    showMonth.style.boxShadow = 'none'
}

//监听年份与月份的下拉框切换
checkYear.onchange = function(){
    year = checkYear.value
    if($('.month').length)show2()
    else show()
}
checkMonth.onchange = function(){
    month = checkMonth.value
    show()
}
